<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-bar .mui-title {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF!important;
				margin-top: 17px;
			}
			
			.mui-input-row label {
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 1.1;
				float: left;
				width: 35%;
				padding: 11px 5px;
				font-size: 14px;
				color: #666;
			}
			
			.mui-btn {
				border: 1px solid #f16456;
				width: 300px;
				background-color: #f16456;
			}
			
			.mui-btn:active {
				border: 1px solid #de7c79!important;
				background-color: #de7c79!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">微信绑定</h1>
		</header>
		<div class="mui-content">
			<p style="margin: 10px;">
				**请务必填写正确信息，提交后将不可更改。
			</p>
			<div id="oldpass_div" class="mui-input-row" style="background: white;margin-top: 5px;margin-left: 5px;margin-right: 5px;">
				<label>微信账号：</label>
				<input id="weixinInput" type="text" class="mui-input-clear" placeholder="请输入微信账号">
			</div>
			<div class="mui-input-row" style="background: white;margin: 5px 50px;">
				<div id="upload_file" class="mui-card-header mui-card-media" style="text-align:center;height:100vw;background:#dcafaf;background-repeat: no-repeat;background-size: 100% 100%;">
					<span id="tips">上传微信收款码</span>
				</div>
			</div>

			<div class="mui-button-row" style="margin-bottom: 20px;margin-top: 10px;">
				<button type="button" class="mui-btn mui-btn-primary" id="confirm">确认提交</button>&nbsp;&nbsp;
			</div>
		</div>

		<script src="../js/mui.min.js "></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript ">
			mui.init();
			var member = null;
			mui.plusReady(function() {
				swipeBack();
				member = JSON.parse(plus.storage.getItem("member"));
				document.getElementById("weixinInput").value = member.wechat;
				if(member.wechatImg) {
					document.getElementById("upload_file").style.backgroundImage = "url(" + member.wechatImg + ")";
					document.getElementById("tips").style.display = "none";
				}
			})

			document.getElementById('confirm').addEventListener('tap', function() {
				var weixinInput = document.getElementById('weixinInput');
				var weixin = weixinInput.value;

				if(!weixin) {
					mymui("请输入微信账号");
					return;
				}
				commitWeixin(weixin);
			});

			//修改
			function commitWeixin(weixin) {
				mui.postJSON(ModifyAlipay, {
					"wechat": weixin
				}, function(data) {
					mConsole.log("修改微信信息:" + JSON.stringify(data));
					var code = data.code;
					if(code == 0) {
						// 显示自动消失的提示消息
						plus.nativeUI.toast("微信绑定成功");
						member.wechat = weixin;
						plus.storage.setItem("member", JSON.stringify(member));
						openSetting();
					} else {
						mymui(data.msg);
					}
				});
			}

			function openSetting() {
				//触发详情页面的setUserState事件
				mui.fire(plus.webview.getWebviewById('setting'), 'setUserState', {});
				//打开
				mui.back();
			}

			//收款码
			document.getElementById("upload_file").addEventListener("tap", function(e) {
				if(mui.os.plus) {
					var a = [{
						title: "拍照"
					}, {
						title: "从手机相册选择 "
					}];
					plus.nativeUI.actionSheet({
						cancel: "取消 ",
						buttons: a
					}, function(b) {
						switch(b.index) {
							case 0:
								break;
							case 1:
								getImage();
								break;
							case 2:
								galleryImg();
								break;
							default:
								break
						}
					})
				}

			});

			//拍照  
			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL();
						document.getElementById("upload_file").style.backgroundImage = "url(" + localurl + ")";
						document.getElementById("tips").style.display = "none";
						upload({
							name: "file", //这个值服务器会用到，作为file的key      
							path: localurl
						});
					});
				});
			}

			function galleryImg() {
				plus.gallery.pick(function(a) {
						document.getElementById("upload_file").style.backgroundImage = "url(" + a + ")";
						document.getElementById("tips").style.display = "none";
						upload({
							name: "file",
							path: a
						});
					},
					function(a) {}, {
						filter: "image"
					})
			};

			// 上传文件  
			function upload(file) {
				var wt = plus.nativeUI.showWaiting("上传中，请稍后...");
				var task = plus.uploader.createUpload(UploadWechat, {
					method: "POST"
				}, function(t, status) {
					if(status == 200) {
						var result = t.responseText;
						var parseResult = JSON.parse(result);
						//上传完成        
						if(parseResult.code == 0) {
							mymui("上传成功");
							member.wechatImg = file.path;
							plus.storage.setItem("member", JSON.stringify(member));
						} else {
							mymui(parseResult.msg);
						}
					}
					wt.close();
				});
				task.setRequestHeader("token", plus.storage.getItem("tooken"));
				task.setRequestHeader("charset", "utf-8");
				task.addFile(file.path, {
					key: file.name
				});
				task.start();
			}
		</script>
	</body>

</html>